<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入要查找的附件名称" clearable
            v-model="listQuery.key" class="w300"></el-input>
        </el-form-item>
        <el-button type="primary" @click="fetchList"
          :loading="listLoading" style="width: 100px;">
          查询
        </el-button>
        <el-button type="success" style="width: 200px;"
          @click="drawer = true;formData = {}">新增附件</el-button>
      </el-form>

      <el-table style="min-height: 200px;"
        v-loading="listLoading"
        :data="list"
        element-loading-text="数据加载中"
        border
        stripe
        fit
        highlight-current-row
        class="table"
        ref="multipleTable">
        <el-table-column label="附件名称" align="center" prop="name" min-width="300"/>
        <!-- <el-table-column label="新增用户" align="center" width="150" prop="createdBy"/> -->
        <!-- <el-table-column label="新增时间" align="center" width="200" prop="createdTime" /> -->
        <el-table-column label="操作" align="right"
          class-name="small-padding fixed-width" min-width="200">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" type="info"
                @click="download(scope.row)">下载</el-button>
              <el-popconfirm title="确定删除该附件？"
                @confirm="deleteById(scope.row.id)">
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center;"
        v-show="total>0"
        :total="total"
        :current-page.sync="listQuery.page"
        :page-size.sync="listQuery.size"
        layout="sizes,prev,slot,next,jumper"
        prev-text="上一页"
        next-text="下一页"
        @size-change="fetchList"
        @current-change="fetchList"
      >
        <span>{{listQuery.page}}/{{ Math.trunc((total+ listQuery.size-1) / listQuery.size)}}</span>
      </el-pagination>
    </div>

    <el-drawer
      title="院士大师分类"
      size="40%"
      :visible.sync="drawer"
      direction="rtl"
      :destroy-on-close="true"
      :before-close="handleClose">
      <el-form style="padding: 0 40px 120px 25px;"
        class="overflowAuto"
        :model="formData" :rules="rules" ref="saveForm" label-width="100px" >
        <el-form-item label="附件" prop="value" :error="imgError">
          <el-upload
            :on-success="fujianUpload"
            :file-list="formData.list"
            :action="baseURL + '/cos/upload?type=article_img'"
            :headers="{authorization: 'Bearer ' + token()}"
            :on-remove="()=>{formData.value = ''}"
            :before-upload="fujianCheck"
            name="file"
            :limit="1">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传.jpg/.png，且不超过2M
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件名称" prop="name">
          <el-input placeholder="请输入附件名称"
            v-model="formData.name" class="w90p"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 150px;"
            :loading="subing" @click="save">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer
      custom-class="detail-drawer"
      title=""
      size="100%"
      @opened="opened"
      :visible.sync="drawer3"
      direction="rtl">
      <template slot="title">
        <div>
          <span>人物预览 - {{detailData.name}}（{{detailData.title}}）</span>
        </div>
      </template>
      <p style="text-align: center;">
        <img style="width: 200px;":src="detailData.img"/>
      </p>
      <div id="articleView"
        style="width: 800px;margin-left: auto;margin-right: auto;"></div>
    </el-drawer>
  </div>
</template>

<script>
import fujian from '@/mixins/fujian.js'
import v from '@/utils/formValidate'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  mixins: [fujian],
  props: ['layout'],
  data() {
    return {
      rules: {
        name: [
          { max: 32, message: '长度不超过 32 个字符', trigger: 'change' },
          { required: true, message: '请输入附件名称', trigger: 'change' },
          { validator: v.validate({ blank: true }), trigger: 'change' }
        ],
      },
    }
  },
  methods: {
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped >
  @import "~@/styles/init.scss";
</style>
<style>
  .detail-drawer {
    padding-bottom: 10px;
  }
  .el-table thead {
    color: #303133 !important;
  }
</style>
